<template>
  <el-card >
    <!-- excel 导入按钮 -->
    <el-button type="primary" icon="el-icon-upload" @click="dialogVisible = true">批量学生资料</el-button>
    <!-- excel 导出按钮 -->
    <el-button type="primary" icon="el-icon-download" @click="exportData">下载模板</el-button>

    <!--导入excel dialog :visible.sync:自动关闭-->
    <el-dialog title="数据字典导入" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-form-item label="请选择Excel文件">
          <!-- 文件上传组件 accept:文件类型过滤 name:file
          与后端responseParams保持一致
          multiple不能多选 limit只能选择一个
          auto-upload自动上传
          -->
          <el-upload
              :auto-upload="true"
              :multiple="false"
              :limit="1"
              :on-exceed="fileUploadExceed"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :action="BASE_API + '/student/import'"
              name="file"
              accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  name: "Excel",
  data() {
    return {
      dialogVisible: false,
      BASE_API: process.env.VUE_APP_BASE_API, // 获取后端地址
      treeList: []// 字典列表
    }
  },
  methods: {
    // 文件上传通信成功
    fileUploadSuccess(response) {
      // 判断通信成功返回的响应码
      if (response.code === 200) {
        this.$message.success('excel数据导入成功!')
        this.dialogVisible = false
        this.$router.push('/student/manage')
      } else {
        this.$message.error(response.message)
      }
    },
    // 文件上传通信失败
    fileUploadError() {
      this.$message.error('excel数据导入失败!请联系管理员')
      this.dialogVisible = false
    },
    // 上传多于一个文件
    fileUploadExceed() {
      this.$message.error('只能上传一个文件')
    },
    // 下载excel文件
    exportData() {
      window.location.href = '\n' +
          'https://meng-edu1010.oss-cn-beijing.aliyuncs.com/%E5%AD%A6%E7%94%9F%E8%B5%84%E6%96%99%E6%A8%A1%E6%9D%BF.xlsx'
    },
  }
}
</script>

<style scoped>

</style>
